<!-- 分析工具栏 -->
<template>
  <div class="toolbar">
    <button
      v-for="item in toolList"
      :key="item.type"
      @click="activate(item.type)"
      class="tool-button"
      v-tooltip="{
        content: item.tooltip,
        placement: item.placement || 'top',
      }"
    >
      <img :src="item.icon" alt="tool icon" class="icon" />
    </button>

    <button @click="clearAllAnalysis" class="tool-button danger" v-tooltip="{ content: '清除所有分析', placement: 'top' }">
      <img src="../../assets/icons/Reset.png" alt="clear" class="icon" />
    </button>
  </div>
  <!--  <canvas id="canvas-container" class="canvas-container"></canvas>-->
</template>

<script setup lang="ts">
import { AnalysisType } from '@/utils/analysis/AnalysisTools';
import { useAnalysis } from '@/composables/useAnalysis';

const toolList = [
  {
    type: AnalysisType.Profile,
    icon: '/src/assets/icons/Profile.png',
    tooltip: '剖面分析',
    placement: 'bottom',
  },
  {
    type: AnalysisType.ViewShed,
    icon: '/src/assets/icons/Profile.png',
    tooltip: '可视域分析',
    placement: 'bottom',
  },
  {
    type: AnalysisType.Sun,
    icon: 'Sun',
    tooltip: '日照分析',
    placement: 'bottom',
  },
];
const { __viewer } = window;
const viewer = __viewer;
const { activateAnalysis, clearAllAnalysis } = useAnalysis(viewer);
//分析功能不支持深度纹理,（无法添加观测）！
// viewer.scene.pickPositionSupported = false;
function activate(type: AnalysisType) {
  activateAnalysis(type);
}
// function clear() {
//   clearAll();
// }
</script>

<style lang="scss">
.toolbar {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid #ccc;
}
.tool-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  width: 40px;
  height: 40px;
  background: #f3f3f3;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.tool-button:hover {
  background: #ddd;
}
.tool-button.danger {
  background: #ffefef;
}
.tool-button.danger:hover {
  background: #ffcccc;
}
.icon {
  width: 20px;
  height: 20px;
}
</style>
